<template>
  <h1 style="margin: 20px">添加客户</h1>
  <div class="operation_panel">
    <el-button type="primary" :icon="Plus" @click="showAddDialog">添加新数据</el-button>
  </div>
  <!-- 添加新数据对话框 -->
  <!-- 模态框 -->
  <el-dialog v-model="dialogFormVisible" title="言㐱陪诊 - 用户信息" width="500">
    <el-form :model="form" :rules="rules" ref="formRef" label-position="right" label-width="auto">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限" prop="user_permission">
        <el-radio-group v-model="form.user_permission">
          <el-radio label="customer">客户</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="患者ID" prop="patient_id">
        <el-input v-model="form.patient_id" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="!isEdit" type="primary" @click="handleAdd">新增</el-button>
        <el-button v-else type="primary" @click="handleEdit">修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { Delete, Plus } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  computed: {
    Plus() {
      return Plus
    }
  },
  components: { Delete, Plus },
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      dialogFormVisible: true,
      isEdit: false,
      tableData: [], // 表格数据
      searchQuery: "", // 搜索框内容
      form: {
        user_id: null,
        username: '',
        password: '',
        user_permission: 'customer',
        patient_id: '',
        escort_id: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        user_permission: [
          { required: true, message: '请选择权限', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    // 2. 添加新数据
    async handleAdd() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.form);
            const res = await axios.post('/api/wu_vue_2_test/User/add', this.form);
            console.log(res);
            this.dialogFormVisible = false;
            await this.getTableData();
            this.showMsg(res);
          } catch (error) {
            console.error('添加数据失败,被占用或网络不佳:', error);
            ElMessage({
              message: '添加数据失败,被占用或网络不佳，请稍后重试',
              type: 'error',
              plain: true
            });
          }
        } else {
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    // 显示添加新数据对话框
    showAddDialog() {
      this.isEdit = false;
      this.dialogFormVisible = true;
      this.resetForm();
    },
    // 重置表单
    resetForm() {
      this.form = {
        username: '',
        password: '',
        user_permission: 'customer',
        patient_id: '',
        escort_id: ''
      };
    },
    // 显示操作结果消息
    showMsg(res) {
      if (res.data.code === 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
          plain: true
        });
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error',
          plain: true
        });
      }
    }
  }
};
</script>

<style scoped>
h1 {
  color: #191919;
}

.operation_panel {
  margin-bottom: 16px;
}

.el-pagination {
  margin-top: 16px;
}
</style>